<template>
    <div class="common-tab-content">
        <div class="add-box">
            <div class="add-menu">
                <el-button type="primary" @click="mergeFn">合并</el-button>
                <el-button type="primary" @click="splitFn">拆分</el-button>
                <el-button type="primary" @click="editFn">修改</el-button>
                <el-button type="primary" @click="deleteFn">删除</el-button>
                <el-popover placement="bottom" :width="400" trigger="hover">
                    <template #reference>
                        <el-icon class="add-tips-icon"><QuestionFilled/></el-icon>
                    </template>
                    <div class="operate-tips">
                        <h4>操作指南</h4>
                        <p class="p1">合并</p>
                        <p class="p2">- 功能：将多个相邻的空白格子合并为一个。</p>
                        <p class="p2">- 规则：只能对空白格子进行此操作。</p>
                        <p class="p1">拆分</p>
                        <p class="p2">- 功能：将已合并的格子还原为原始的独立格子。</p>
                        <p class="p2">- 规则：前提条件是该合并格子必须为空白状态。含有广告内容的格子受保护，无法拆分。</p>
                        <p class="p1">修改</p>
                        <p class="p2">- 功能：更改格子的广告内容。</p>
                        <p class="p2">- 规则：适用于所有格子状态（单个/合并/有广告内容）。</p>
                        <p class="p1">删除</p>
                        <p class="p2">- 功能：移除格子中的广告内容。</p>
                        <p class="p2">- 规则：执行后格子变为空白。不影响格子本身的合并或拆分状态。</p>
                    </div>
                </el-popover>
            </div>
            <div class="add-content">
                <div class="top">
                    <div class="add-content-child">
                        <div
                                class="add-item"
                                @click="chooseColumn(item, 'add1')"
                                v-for="(item, index) in addList1"
                                :style="`width:${100*item.span/item.total}%`"
                                :class="{active: item.checked}"
                                :key="index">
                            <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                            <div class="check-box" v-if="item.checked">
                                <el-icon class="check-icon"><Check/></el-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div class="add-content-child">
                            <div
                                    class="add-item"
                                    v-for="(item, index) in addList2"
                                    @click="chooseColumn(item, 'add2')"
                                    :style="`width:${100*item.span/item.total}%`"
                                    :class="{active: item.checked}"
                                    :key="index">
                                <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                                <div class="check-box" v-if="item.checked">
                                    <el-icon class="check-icon"><Check/></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="add-content-child">
                            <div
                                    class="add-item"
                                    v-for="(item, index) in addList3"
                                    @click="chooseColumn(item, 'add3')"
                                    :style="`width:${100*item.span/item.total}%`"
                                    :class="{active: item.checked}"
                                    :key="index">
                                <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                                <div class="check-box" v-if="item.checked">
                                    <el-icon class="check-icon"><Check/></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="add-content-child">
                            <div
                                    class="add-item"
                                    v-for="(item, index) in addList4"
                                    @click="chooseColumn(item, 'add4')"
                                    :style="`width:${100*item.span/item.total}%`"
                                    :class="{active: item.checked}"
                                    :key="index">
                                <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                                <div class="check-box" v-if="item.checked">
                                    <el-icon class="check-icon"><Check/></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="add-content-child">
                            <div
                                    class="add-item"
                                    v-for="(item, index) in addList5"
                                    @click="chooseColumn(item, 'add5')"
                                    :style="`width:${100*item.span/item.total}%`"
                                    :class="{active: item.checked}"
                                    :key="index">
                                <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                                <div class="check-box" v-if="item.checked">
                                    <el-icon class="check-icon"><Check/></el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="add-content-child">
                            <div
                                    class="add-item"
                                    v-for="(item, index) in addList6"
                                    @click="chooseColumn(item, 'add6')"
                                    :style="`width:${item.span === 1 ? 96*item.span/item.total : 100}%;height:${100*Math.ceil(item.span/2)}px`"
                                    :class="{active: item.checked}"
                                    :key="index">
                                <img v-if="item.add && item.add.img" :src="item.add.img" alt=""/>
                                <div class="check-box" v-if="item.checked">
                                    <el-icon class="check-icon"><Check/></el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="visible" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Edit/>
                        </el-icon>
                        <span>修改广告</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-form ref="commonForm" :model="addObj" class="common-form" label-position="top">
                    <el-form-item label="名称">
                        <el-input v-model="addObj.name"></el-input>
                    </el-form-item>
                    <el-form-item label="链接">
                        <el-input v-model="addObj.url"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                :show-file-list="false"
                        >
                            <img v-if="addObj.img" :src="addObj.img" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="enterAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {QuestionFilled, Check, Edit,Plus} from '@element-plus/icons-vue'
import {ref} from 'vue'
import { mergeData,mergeData2,splitData} from "../utils/index"
import {$confirm, $msg} from "@/utils";
const visible = ref(false)
const addObj = ref({
    name: '',
    url: '',
    img: ''
})
const fileList = ref([])
const addList1 = ref([
    {
        total: 4,
        span: 1,
        sort: 0,
    },
    {
        total: 4,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 4,
        span: 1,
        sort: 2,
    },
    {
        total: 4,
        span: 1,
        sort: 3,
    }
])
const addList2 = ref([
    {
        total: 6,
        span: 1,
        sort: 0,
    },
    {
        total: 6,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 6,
        span: 1,
        sort: 2,
    },
    {
        total: 6,
        span: 1,
        sort: 3,
    },
    {
        total: 6,
        span: 1,
        sort: 4,
    },
    {
        total: 6,
        span: 1,
        sort: 5,
    }
])
const addList3 = ref([
    {
        total: 6,
        span: 1,
        sort: 0,
    },
    {
        total: 6,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 6,
        span: 1,
        sort: 2,
    },
    {
        total: 6,
        span: 1,
        sort: 3,
    },
    {
        total: 6,
        span: 1,
        sort: 4,
    },
    {
        total: 6,
        span: 1,
        sort: 5,
    }
])
const addList4 = ref([
    {
        total: 6,
        span: 1,
        sort: 0,
    },
    {
        total: 6,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 6,
        span: 1,
        sort: 2,
    },
    {
        total: 6,
        span: 1,
        sort: 3,
    },
    {
        total: 6,
        span: 1,
        sort: 4,
    },
    {
        total: 6,
        span: 1,
        sort: 5,
    }
])
const addList5 = ref([
    {
        total: 6,
        span: 1,
        sort: 0,
    },
    {
        total: 6,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 6,
        span: 1,
        sort: 2,
    },
    {
        total: 6,
        span: 1,
        sort: 3,
    },
    {
        total: 6,
        span: 1,
        sort: 4,
    },
    {
        total: 6,
        span: 1,
        sort: 5,
    }
])
const addList6 = ref([
    {
        total: 2,
        span: 1,
        sort: 0,
    },
    {
        total: 2,
        span: 1,
        sort: 1,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 2,
        span: 1,
        sort: 2,
    },
    {
        total: 2,
        span: 1,
        sort: 3,
    },
    {
        total: 2,
        span: 1,
        sort: 4,
    },
    {
        total: 2,
        span: 1,
        sort: 5,
    },
    {
        total: 2,
        span: 1,
        sort: 6,
    },
    {
        total: 2,
        span: 1,
        sort: 7,
    },
    {
        total: 2,
        span: 1,
        sort: 8,
    },
    {
        total: 2,
        span: 1,
        sort: 9,
    },
    {
        total: 2,
        span: 1,
        sort: 10,
    },
    {
        total: 2,
        span: 1,
        sort: 11,
    },
    {
        total: 2,
        span: 1,
        sort: 12,
    },
    {
        total: 2,
        span: 1,
        sort: 13,
    },
    {
        total: 2,
        span: 1,
        sort: 14,
    },
    {
        total: 2,
        span: 1,
        sort: 15,
    },
    {
        total: 2,
        span: 1,
        sort: 16,
    },
    {
        total: 2,
        span: 1,
        sort: 17,
    },
    {
        total: 2,
        span: 1,
        sort: 18,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 2,
        span: 1,
        sort: 19,
    },
    {
        total: 2,
        span: 1,
        sort: 20,
    },
    {
        total: 2,
        span: 1,
        sort: 21,
    },
    {
        total: 2,
        span: 1,
        sort: 22,
    },
    {
        total: 2,
        span: 1,
        sort: 23,
    },
    {
        total: 2,
        span: 1,
        sort: 24,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 2,
        span: 1,
        sort: 25,
    },
    {
        total: 2,
        span: 1,
        sort: 26,
    },
    {
        total: 2,
        span: 1,
        sort: 27,
    },
    {
        total: 2,
        span: 1,
        sort: 28,
    },
    {
        total: 2,
        span: 1,
        sort: 29,
    },
    {
        total: 2,
        span: 1,
        sort: 30,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 2,
        span: 1,
        sort: 31,
    },
    {
        total: 2,
        span: 1,
        sort: 32,
    },
    {
        total: 2,
        span: 1,
        sort: 33,
    },
    {
        total: 2,
        span: 1,
        sort: 34,
    },
    {
        total: 2,
        span: 1,
        sort: 35,
    },
    {
        total: 2,
        span: 1,
        sort: 36,
        add: {
            name: '武汉大学',
            url: 'https://www.whu.edu.cn/',
            img: 'https://www.whu.edu.cn/__local/6/8D/69/96B9BCD9B5CE64345779F615AA4_8882ECBF_332CF.jpg'
        }
    },
    {
        total: 2,
        span: 1,
        sort: 37,
    },
    {
        total: 2,
        span: 1,
        sort: 38,
    },
    {
        total: 2,
        span: 1,
        sort: 39,
    }
])
const chooseArr1 = ref([])
const chooseArr2 = ref([])
const chooseArr3 = ref([])
const chooseArr4 = ref([])
const chooseArr5 = ref([])
const chooseArr6 = ref([])
const addType = ref('')
function chooseColumn(item, type){
    if(addType.value === type || addType.value === ''){
        if(item.checked){
            item.checked = false
            if(type === 'add1'){
                chooseArr1.value = chooseArr1.value.filter(item1 => item1 !== item.sort)
            }else if (type === 'add2') {
                chooseArr2.value = chooseArr2.value.filter(item1 => item1 !== item.sort)
            }else if (type === 'add3') {
                chooseArr3.value = chooseArr3.value.filter(item1 => item1 !== item.sort)
            }else if (type === 'add4') {
                chooseArr4.value = chooseArr4.value.filter(item1 => item1 !== item.sort)
            }else if (type === 'add5') {
                chooseArr5.value = chooseArr5.value.filter(item1 => item1 !== item.sort)
            }else if (type === 'add6') {
                chooseArr6.value = chooseArr6.value.filter(item1 => item1 !== item.sort)
            }
            addType.value = !chooseArr1.value.length && !chooseArr2.value.length && !chooseArr3.value.length && !chooseArr4.value.length && !chooseArr5.value.length && !chooseArr6.value.length ? '' : type
            return
        }else {
            addType.value = type
            item.checked = true
            if(type === 'add1'){
                chooseArr1.value.push(item.sort)
            }else if (type === 'add2'){
                chooseArr2.value.push(item.sort)
            }else if (type === 'add3'){
                chooseArr3.value.push(item.sort)
            }
            else if (type === 'add4'){
                chooseArr4.value.push(item.sort)
            }
            else if (type === 'add5'){
                chooseArr5.value.push(item.sort)
            }
            else if (type === 'add6'){
                chooseArr6.value.push(item.sort)
            }
        }
    }else {
        $msg({
            type: 'warning',
            message: '一次只能编辑一个广告位区块',
        })
    }
}
function mergeFn() {
    const listMap = [
        { list: addList1, choices: chooseArr1, fn: mergeData },
        { list: addList2, choices: chooseArr2, fn: mergeData },
        { list: addList3, choices: chooseArr3, fn: mergeData },
        { list: addList4, choices: chooseArr4, fn: mergeData },
        { list: addList5, choices: chooseArr5, fn: mergeData },
        { list: addList6, choices: chooseArr6, fn: mergeData2 }
    ];
    const activeList = listMap.find(item => item.choices.value.length > 0);
    if (!activeList) {
        $msg({
            type: 'warning',
            message: '请选择要合并的广告位',
        })
        return;
    }
    const { list, choices, fn } = activeList;
    const chooseObjs = list.value.filter(item => choices.value.includes(item.sort)).find(item => item.add);
    if (chooseObjs) {
        $msg({
            type: 'warning',
            message: '请先删除广告内容后再进行合并',
        })
        return;
    }
    if (choices.value.length <= 1) {
        $msg({
            type: 'warning',
            message: '合并操作需要最少两个格子',
        })
        return;
    }
    const flag = isCoherent(choices.value);
    if (!flag) {
        $msg({
            type: 'warning',
            message: '请检查选择的格子是否连续',
        })
        return;
    }
    const result = fn(list.value, choices.value)
    if(typeof result === 'string'){
        $msg({
            type: 'warning',
            message: result
        })
        return;
    }else {
        list.value = result
    }
    choices.value = [];
    addType.value = '';
    $msg({
        type: 'success',
        message: '合并成功',
    })
}
function splitFn(){
    const listMap = [
        { list: addList1, choices: chooseArr1 },
        { list: addList2, choices: chooseArr2 },
        { list: addList3, choices: chooseArr3 },
        { list: addList4, choices: chooseArr4 },
        { list: addList5, choices: chooseArr5 },
        { list: addList6, choices: chooseArr6 }
    ];
    const activeList = listMap.find(item => item.choices.value.length > 0);
    if (!activeList) {
        $msg({
            type: 'warning',
            message: '请选择要拆分的广告位',
        })
        return;
    }
    const { list, choices } = activeList;
    if (choices.value.length === 1 &&
            !list.value[choices.value[0]].add &&
            list.value[choices.value[0]].span > 1) {

        list.value = splitData(list, choices);
        choices.value = [];
        addType.value = '';
        $msg({
            type: 'success',
            message: '拆分成功',
        })
    } else {
        $msg({
            type: 'warning',
            message: '只能同时拆分一个格子，且格子内无广告内容以及该格子占两个及以上基础格子',
        })
    }
}

function editFn(){
    const selectionCount = chooseArr1.value.length + chooseArr2.value.length +
            chooseArr3.value.length + chooseArr4.value.length +
            chooseArr5.value.length + chooseArr6.value.length;

    if(selectionCount !== 1) {
        $msg({
            type: 'warning',
            message: '只能同时编辑一个广告位内容',
        })
        return;
    }
    const listMap = [
        { list: addList1, choices: chooseArr1 },
        { list: addList2, choices: chooseArr2 },
        { list: addList3, choices: chooseArr3 },
        { list: addList4, choices: chooseArr4 },
        { list: addList5, choices: chooseArr5 },
        { list: addList6, choices: chooseArr6 }
    ];
    const activeList = listMap.find(({ choices }) => choices.value.length === 1);
    if (activeList) {
        const { list, choices } = activeList;
        const selectedIndex = choices.value[0];
        const selectedItem = list.value[selectedIndex];
        const obj = selectedItem?.add;
        addObj.value.name = obj?.name || '';
        addObj.value.url = obj?.url || '';
        addObj.value.img = obj?.img || '';
        fileList.value = obj?.img ? [{name: '', url: obj.img}] : [];
        visible.value = true;
    }
}
function deleteFn(){
    const selectionCount = chooseArr1.value.length + chooseArr2.value.length +
            chooseArr3.value.length + chooseArr4.value.length +
            chooseArr5.value.length + chooseArr6.value.length;

    if(selectionCount !== 1) {
        $msg({
            type: 'warning',
            message: '只能同时删除一个广告位内容',
        })
        return;
    }
    const listMap = [
        { list: addList1, choices: chooseArr1 },
        { list: addList2, choices: chooseArr2 },
        { list: addList3, choices: chooseArr3 },
        { list: addList4, choices: chooseArr4 },
        { list: addList5, choices: chooseArr5 },
        { list: addList6, choices: chooseArr6 }
    ];
    const activeList = listMap.find(({ choices }) => choices.value.length === 1);
    if (activeList) {
        const { list, choices } = activeList;
        const selectedIndex = choices.value[0];
        const selectedItem = list.value[selectedIndex];
        if(selectedItem) {
            $confirm({
                title: '是否删除该广告位的广告内容?',
                type: 'delete'
            }).then(() => {
                $msg({
                    type: 'success',
                    message: '删除成功',
                })
                delete selectedItem.add;
                delete selectedItem.checked;
                choices.value = [];
                addType.value = '';
            });
        }
    }
}
function isCoherent(arr){
    const sortedArr = [...arr].sort((a, b) => a - b);
    for (let i = 1; i < sortedArr.length; i++) {
        if (sortedArr[i] !== sortedArr[i - 1] + 1) {
            return false;
        }
    }
    return true;
}
function enterAdd(){
    $msg({
        type: 'success',
        message: '修改成功',
    })
    visible.value = false
    chooseArr1.value = []
    chooseArr2.value = []
    addList1.forEach(item => {
        item.checked = false
    })
    addList2.forEach(item => {
        item.checked = false
    })
}
</script>
<style scoped lang="less">
    .add-box{
        .add-menu{
            padding: 12px 20px;
            display: flex;
            .add-tips-icon{
                margin-left: 10px;
                font-size: 22px;
                color: #aaa;
                cursor: pointer;
                margin-top: 4px;
            }
        }
        .add-content{
            width: 100%;
            display: flex;
            justify-content: right;
            flex-wrap: wrap;
            .top{
                width: 40%;
                margin-bottom: 40px;
            }
            .bottom{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .left{
                    width: 75%;
                    .add-content-child{
                        margin-bottom: 100px;
                    }
                }
                .right{
                    width: 20%;
                    .add-content-child{
                        flex-wrap: wrap;
                        .add-item{
                            margin: 10px 0;
                            .check-box{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                }
            }
            .add-content-child{
                display: flex;
                justify-content: space-between;
                width: 100%;
                .add-item{
                    height: 100px;
                    background: #ccc;
                    margin: 0 10px;
                    position: relative;
                    cursor: pointer;
                    box-sizing: border-box;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .check-box{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        background: #1d81ff;
                        text-align: center;
                        line-height: 120px;
                        .check-icon{
                            font-size: 36px;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    .operate-tips{
        width: 100%;
        text-align: left;
        h4{
            font-size: 16px;
            color: #000;
            text-align: center;
        }
        .p1{
            font-size: 14px;
            color: #000;
            margin-top: 10px;
        }
        .p2{
            font-size: 14px;
            color: #333;
        }
    }
    .avatar-uploader .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
    .avatar-uploader {
        ::v-deep .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
            &:hover {
                border-color: var(--el-color-primary);
            }
        }
        ::v-deep .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            text-align: center;
        }
    }
</style>
